<template>
    <div class="count-effect">
        <div class="card">
            <div class="card__header">
                <span class="label">昨日概况</span>
            </div>
            <el-row :gutter="15" :justify="'center'">
                <el-col :lg="16" :md="20" :xs="24">
                    <div class="card__container">
                        <ul class="count-effect__cop">
                            <li>
                                <span>活跃用户</span>
                                <span>0</span>
                                <span><span>日</span><span :class="1>0?'add':'minus'">+100%</span></span>
                                <span><span>周</span><span :class="1>0?'add':'minus'">+100%</span></span>
                                <span><span>月</span><span :class="1>0?'add':'minus'">+100%</span></span>
                            </li>

                            <li>
                                <span>注册用户</span>
                                <span>0</span>
                                <span><span>日</span><span :class="1>0?'add':'minus'">+100%</span></span>
                                <span><span>周</span><span :class="1>0?'add':'minus'">+100%</span></span>
                                <span><span>月</span><span :class="1>0?'add':'minus'">+100%</span></span>
                            </li>

                            <li>
                                <span>总收入</span>
                                <span>0</span>
                                <span><span>日</span><span :class="1>0?'add':'minus'">+100%</span></span>
                                <span><span>周</span><span :class="1>0?'add':'minus'">+100%</span></span>
                                <span><span>月</span><span :class="1>0?'add':'minus'">+100%</span></span>
                            </li>

                            <li>
                                <span>人均停留时长</span>
                                <span>0</span>
                                <span><span>日</span><span :class="1>0?'add':'minus'">+100%</span></span>
                                <span><span>周</span><span :class="1>0?'add':'minus'">+100%</span></span>
                                <span><span>月</span><span :class="1>0?'add':'minus'">+100%</span></span>
                            </li>
                        </ul>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useCool } from '/@/cool';
import { ArrowRightBold } from '@element-plus/icons-vue';

const { service, router } = useCool();

const count = ref({ total: 0, today: 0, week: 0, month: 0, year: 0 });

// onMounted(() => {
// 	service.count.home
// 		.orderSummary({
// 			type: 'amount'
// 		})
// 		.then(res => {
// 			console.log(res);
// 			count.value = res;
// 		});
// });
</script>

<style lang="scss" scoped>
.count-effect {
	&__cop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// height: 50px;

		li {
			display: flex;
			flex-direction: column;
			justify-content: center;
			list-style: none;
			flex: 1;
			align-items: center;
			span {
				&:first-child {
					font-size: 14px;
					color: #999;
					margin-bottom: 10px;
				}
				&:nth-child(2) {
					margin-top: 5px;
					font-size: 24px;
					color: #000;
				}
				margin-top: 10px;
				span {
					&:first-child {
						font-size: 13px;
						color: #999;
						margin-right: 10px;
					}
					&:last-child {
						font-size: 13px;
					}
					&.add {
						color: var(--color-primary) !important;
					}
					&.minus {
						color: var(--color-primary) !important;
					}
				}
			}
		}
	}
}
</style>